.off-canvas {
    position: absolute;
    top: 45px;
    bottom: 0;
    left: 0;
    //margin-left: -300px;
    border-right: 1px solid $bd-color;
    width: 300px;
    overflow: auto;
    background-color: #FFF;
    @include transition(.5s);
    @include boxSizing(border-box);
    .close-off-canvas {
        position: absolute;
        top: 0;
        right: 0;
        border: none;
        padding: 0;
        width: 50px;
        height: 60px;
        line-height: 60px;
        font-size: 14px;
        text-align: center;
        background-color: transparent;
        cursor: pointer;
    }
}

.off-canvas-wrapper, .off-canvas-pusher {
    overflow: hidden;
    position: relative;
    height: 100%;
    @include transition(.5s);
}
.off-canvas-pusher {
    background-color: #FFF;
    z-index: 1;
}
.off-canvas-on {
    overflow: hidden;
    .off-canvas-pusher {
        transform: -webkit-translate3d(300px, 0, 0);
        transform: translate3d(300px, 0, 0);
    }
    .off-canvas {
        margin-left: 0;
    }
}

@media screen and (min-width: $vw-small){
    .off-canvas {
        //margin-left: -360px;
        width: 360px;
        .close-off-canvas {
            width: 40px;
            height: 40px;
            line-height: 40px;
            color: $gray;
        }
    }
    
    .off-canvas-on {
        .off-canvas-pusher {
            transform: -webkit-translate3d(360px, 0, 0);
            transform: translate3d(360px, 0, 0);
        }
    }
}